<!DOCTYPE html>
<html>
    <head>
        <title>1</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
       <div id="root">
            <h2>人员列表-遍历数组</h2>
            <ul>
                <li v-for="(p,key) in persons" :key="p.id">
                    {{p.name}}-{{p.age}}--{{key}}
                </li>
            </ul>
            <h2>汽车</h2>
            <ul>
                <!-- 遍历对象 -->
                <li v-for="(val,key) in car" :key="key">
                    {{key}}-{{val}}
                </li>
            </ul>
            <h2>遍历制定次数</h2>
            <ul>
                <li v-for="(n,index) in 5" :key="n">
                    {{n}} {{index}}
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false
            new Vue({
                el: '#root', 
                data(){
                    return {
                        persons:[
                            {id:'001',name:'张三',age:18},
                            {id:'002',name:'张4',age:118},
                            {id:'003',name:'张5',age:218},
                        ],
                        car:{
                            name:'奥迪A8',
                            price:'70',
                            color:'black',
                        }
                    }
                }
            })
        </script>
    </body>
</html>
